<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flex-box{
            display: flex;
            flex-wrap: wrap;
        }
        .flex-ibox{
            display: inline-flex;
            flex-wrap: wrap;
            vertical-align: top;
        }

        /**--row--***/
        .flex-ibox--row-tl,
        .flex-box--row-tl{
            flex-direction:row;
            justify-content:flex-start;
            align-items:flex-start;
            align-content:flex-start;
        }
        .flex-ibox--row-tc,
        .flex-box--row-tc{
            flex-direction:row;
            justify-content:center;
            align-items:flex-start;
            align-content:flex-start;
        }
        .flex-ibox--row-tr,
        .flex-box--row-tr{
            flex-direction:row;
            justify-content:flex-end;
            align-items:flex-start;
            align-content:flex-start;
        }
        .flex-ibox--row-cl,
        .flex-box--row-cl{
            flex-direction:row;
            justify-content:flex-start;
            align-items:center;
            align-content:center;
        }
        .flex-ibox--row-cc,
        .flex-box--row-cc{
            flex-direction:row;
            justify-content:center;
            align-items:center;
            align-content:center;
        }
        .flex-ibox--row-cr,
        .flex-box--row-cr{
            flex-direction:row;
            justify-content:flex-end;
            align-items:center;
            align-content:center;
        }
        .flex-ibox--row-bl,
        .flex-box--row-bl{
            flex-direction:row;
            justify-content:flex-start;
            align-items:flex-end;
            align-content:flex-end;
        }
        .flex-ibox--row-bc,
        .flex-box--row-bc{
            flex-direction:row;
            justify-content:center;
            align-items:flex-end;
            align-content:flex-end;
        }
        .flex-ibox--row-br,
        .flex-box--row-br{
            flex-direction:row;
            justify-content:flex-end;
            align-items:flex-end;
            align-content:flex-end;
        }
        .flex-ibox--row-tsb,
        .flex-box--row-tsb{
            flex-direction:row;
            justify-content:space-between;
            align-items:inherit;
            align-content:flex-start;
        }
        .flex-ibox--row-csb,
        .flex-box--row-csb{
            flex-direction:row;
            justify-content:space-between;
            align-items:center;
            align-content:center;
        }
        .flex-ibox--row-bsb,
        .flex-box--row-bsb{
            flex-direction:row;
            justify-content:space-between;
            align-items:flex-end;
            align-content:flex-end;
        }
        .flex-ibox--row-tsa,
        .flex-box--row-tsa{
            flex-direction:row;
            justify-content:space-around;
            align-items:inherit;
            align-content:flex-start;
        }
        .flex-ibox--row-csa,
        .flex-box--row-csa{
            flex-direction:row;
            justify-content:space-around;
            align-items:center;
            align-content:center;
        }
        .flex-ibox--row-bsa,
        .flex-box--row-bsa{
            flex-direction:row;
            justify-content:space-around;
            align-items:flex-end;
            align-content:flex-end;
        }


        /**--column--***/


        /**--- nowrap --***/
        [class*="flex-box--"].flex-box--nowrap,
        [class*="flex-ibox--"].flex-ibox--nowrap{
            flex-wrap: nowrap;
        }
        /**--- reverse --***/
        [class*="flex-box--"].flex-box--reverse,
        [class*="flex-ibox--"].flex-ibox--reverse{
            flex-direction:row-reverse;
        }
        /**--- baseline --***/
        [class*="flex-box--"].flex-box--baseline,
        [class*="flex-ibox--"].flex-ibox--baseline{
            align-items:baseline;

        }


    </style>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .flex-box{
            width:100%;
            border:1px solid #f0f;
            box-sizing: border-box;
        }
        .flex-ibox{
            width:300px;
            height:200px;
            border:1px solid #f0f;
            box-sizing: border-box;
        }
        .flex-box__item{
            width:50px;
            height:50px;
            border:1px solid #4abfff;
            box-sizing: border-box;
        }

        ol li{
            padding:12px;
        }

    </style>
</head>
<body>

<div style="color:#333;">
    <h2 style="color:#f00;">根据常用的页面布局情况，使用flex快速布局的解决方案</h2>
    <p>使用说明：</p>
    <ol>
        <li>-当设置 className 为 flex-box,即表示该盒子是 flex 容器。当设置 className 为 flex-ibox,即表示该盒子是 inline-flex 容器。</li>

        <li>-当设置 className 为 flex-box--row-[x] 或者 flex-ibox--row-[x] 都是表示主轴是row。</li>
        <li>-当设置 className 为 flex-box--column-[x] 或者 flex-ibox--column-[x] 都是表示主轴是column。</li>
        <li>-完整的class设置，例如：class="flex-box flex-box-row-[x]"，其中[x]表示可选参数</li>
        <li>-当要实现row-reverse或者column-reverse这两种主轴，则在分别在row主轴或者column主轴的情况加上flex-box--reverse。例如：class="flex-box flex-box--row-[x] flex-box--reverse"</li>

        <li>-根据九宫格，把顶行表示为top，从左往右依次是left、center、right, 那么顶行的三个格子依次记作top-left、top-center、top-right,它们的缩写分别是tl、tc、tr。</li>
        <li>-根据九宫格，把中间行表示为center，从左往右依次是left、center、right, 那么顶行的三个格子依次记作center-left、center-center、center-right,它们的缩写分别是cl、cc、cr。</li>
        <li>-根据九宫格，把底行表示为bottom，从左往右依次是left、center、right, 那么顶行的三个格子依次记作bottom-left、bottom-center、bottom-right,它们的缩写分别是bl、bc、br。</li>
        <li>-根据九宫格得到九个方位，即得到flex-direction的九种对齐方式, 即是[x]的取值，它们分别是tl、tc、tr、cl、cc、cr、bl、bc、br。</li>
        <li>-完整的使用案例解释：设置class="flex-box flex-box--row-tl",css是:</li>
            <div style="margin-left:100px;">
                <p>.flex-box{</p>
                <p style="padding-left:14px;">display: flex;</p>
                <p style="padding-left:14px;">flex-wrap: wrap;</p>
                <p>}</p>
                <p>.flex-box--row-tl{</p>
                <p style="padding-left:14px;"> flex-direction:row;</p>
                <p style="padding-left:14px;">justify-content:flex-start;</p>
                <p style="padding-left:14px;">align-items:flex-start;</p>
                <p style="padding-left:14px;">align-content:flex-start;</p>
                <p>}</p>
                <p style="padding-left:14px;"></p>
                <p style="padding-left:14px;"></p>
            </div>
        <li>-设置容器css时一般规定，flex-wrap默认值wrap，</li>
        <li>-设置项目不换行，flex-box类型添加flex-box--nowrap，flex-ibox类型添加flex-ibox--nowrap。</li>
        <li>-设置项目的第一行文字的基线对齐，flex-box类型添加flex-box--baseline，flex-ibox类型添加flex-ibox--baseline。</li>
        <li>注意:
            <p>只有某些情况才可以设置flex-box--baseline或者flex-ibox--baseline，否则可能出现bug。</p>
            <p>flex-box和flex-ibox容器的flex-wrap:wrap-reverse、align-items:stretch、align-content:stretch情况都不考虑。</p>
            <p>flex-box和flex-ibox容器的项目属性都是默认值，一般不考虑。</p>
        </li>
    </ol>
</div>
<div style="padding-top:50px;">
    <h2>实例如下：</h2>
</div>
<div style="color:#f00;" ><br><br><br>flex-box  表示flex类型的容器</div>
<div class="flex-box" style="height:100px;">

</div>
<div style="color:#f00;" ><br><br><br>flex-ibox  表示inline-flex类型的容器</div>
<div class="flex-ibox" style="width:100px;height:100px;"></div>
<div class="flex-ibox" style="width:100px;height:100px;"></div>

<!-- flex-box-row-[x] -->
<div style="background:#f5f1ff;padding:50px 0;" >
    <h2>flex-box-row-[x]</h2>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tl
        </div>
        <div class="flex-box flex-box--row-tl flex-box--baseline" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item" style="font-size:18px;">2</div>
            <div class="flex-box__item" style="font-size:24px;">3</div>
            <div class="flex-box__item">4</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tl" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tc
        </div>
        <div class="flex-box flex-box--row-tc" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tc" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tr
        </div>
        <div class="flex-box flex-box--row-tr" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tr" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-cl
        </div>
        <div class="flex-box flex-box--row-cl" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-cl" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-cc
        </div>
        <div class="flex-box flex-box--row-cc" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-cc" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-cr
        </div>
        <div class="flex-box flex-box--row-cr" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-cr" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bl
        </div>
        <div class="flex-box flex-box--row-bl" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bl" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bc
        </div>
        <div class="flex-box flex-box--row-bc" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bc" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-br
        </div>
        <div class="flex-box flex-box--row-br" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-br" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tsb
        </div>
        <div class="flex-box flex-box--row-tsb" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tsb" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-csb
        </div>
        <div class="flex-box flex-box--row-csb" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-csb" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bsb
        </div>
        <div class="flex-box flex-box--row-bsb" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bsb" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tsa
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tsa" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tsa" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-csa
        </div>
        <br><br>
        <div class="flex-box flex-box--row-csa" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-csa" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bsa
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bsa" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bsa" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
</div>

<!-- flex-box-row-[x] flex-box--reverse -->
<div style="background:#e7f3f8;padding:50px 0;" >
    <br><br><br>
    <h2>flex-box-row-[x] 加上flex-box--reverse实现对称反转，也即是实现row-reverse</h2>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tl flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-tl flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tl flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tc flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-tc flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tc flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tr flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-tr flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tr flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-cl flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-cl flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-cl flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-cc flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-cc flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-cc flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-cr flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-cr flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-cr flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bl flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-bl flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bl flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bc flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-bc flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bc flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-br flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-br flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-br flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tsb flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-tsb flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tsb flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-csb flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-csb flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-csb flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bsb flex-box--reverse
        </div>
        <div class="flex-box flex-box--row-bsb flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bsb flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-tsa flex-box--reverse
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tsa flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-tsa flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-csa flex-box--reverse
        </div>
        <br><br>
        <div class="flex-box flex-box--row-csa flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-csa flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--row-bsa flex-box--reverse
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bsa flex-box--reverse" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <br><br>
        <div class="flex-box flex-box--row-bsa flex-box--reverse" style="height:200px;width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
</div>

<!-- flex-ibox-row-[x] -->
<div style="background:#fff2e3;padding:50px 0;" >
    <h2>flex-ibox-row-[x]</h2>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tl
        </div>
        <div class="flex-ibox flex-ibox--row-tl flex-ibox--baseline" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item" style="font-size:18px;">2</div>
            <div class="flex-box__item" style="font-size:24px;">3</div>
            <div class="flex-box__item">4</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tl" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-tl flex-ibox--baseline flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item" style="font-size:18px;">2</div>
            <div class="flex-box__item" style="font-size:24px;">3</div>
            <div class="flex-box__item">4</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tl" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tc
        </div>
        <div class="flex-ibox flex-ibox--row-tc" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tc" style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tr
        </div>
        <div class="flex-ibox flex-ibox--row-tr" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tr" style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-cl
        </div>
        <div class="flex-ibox flex-ibox--row-cl" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cl " style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-cl flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cl " style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-cc
        </div>
        <div class="flex-ibox flex-ibox--row-cc" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cc" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-cc flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cc" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-cr
        </div>
        <div class="flex-ibox flex-ibox--row-cr " >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cr" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-cr flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cr" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bl
        </div>
        <div class="flex-ibox flex-ibox--row-bl" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bl" style="width:152px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bc
        </div>
        <div class="flex-ibox flex-ibox--row-bc" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bc" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-bc flex-ibox--vertical-bottom" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bc" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-br
        </div>
        <div class="flex-ibox flex-ibox--row-br" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-br" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-br flex-ibox--vertical-bottom" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-br" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tsb
        </div>
        <div class="flex-ibox flex-ibox--row-tsb" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tsb" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-csb
        </div>
        <div class="flex-ibox flexi-box--row-csb" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csb" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-csb flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csb" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bsb
        </div>
        <div class="flex-ibox flex-ibox--row-bsb" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bsb" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-bsb flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bsb" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tsa
        </div>
        <br><br>
        <div class="flex-ibox flex-ibox--row-tsa" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tsa" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-csa
        </div>
        <br><br>
        <div class="flex-ibox flex-ibox--row-csa" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csa" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-csa flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csa" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bsa
        </div>
        <br><br>
        <div class="flex-ibox flex-ibox--row-bsa" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>

        <div class="flex-ibox flex-ibox--row-bsa" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-bsa flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>

        <div class="flex-ibox flex-ibox--row-bsa" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
</div>

<!-- flex-ibox-row-[x] flex-ibox--reverse -->
<div style="background:#ededff;padding:50px 0;" >
    <h2>flex-ibox-row-[x] 加上 flex-ibox--reverse实现对称反转，也即是实现row-reverse</h2>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tl flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-tl flex-ibox--reverse flex-ibox--baseline" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item" style="font-size:18px;">2</div>
            <div class="flex-box__item" style="font-size:24px;">3</div>
            <div class="flex-box__item">4</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tl flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-tl flex-ibox--reverse flex-ibox--baseline flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item" style="font-size:18px;">2</div>
            <div class="flex-box__item" style="font-size:24px;">3</div>
            <div class="flex-box__item">4</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tl flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tc flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-tc flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tc flex-ibox--reverse" style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tr flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-tr flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tr flex-ibox--reverse" style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-cl flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-cl flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cl flex-ibox--reverse" style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-cl flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cl flex-ibox--reverse" style="height:200px;width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-cc flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-cc flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cc flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-cc flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cc flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-cr flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-cr flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cr flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-cr flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-cr flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bl flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-bl flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bl flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bc flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-bc flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bc flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-bc flex-ibox--reverse flex-ibox--vertical-bottom" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bc flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-br flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-br flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-br flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-br flex-ibox--reverse flex-ibox--vertical-bottom" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-br flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tsb flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-tsb flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tsb flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-csb flex-ibox--reverse
        </div>
        <div class="flex-ibox flexi-box--row-csb flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csb flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-csb flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csb flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bsb flex-ibox--reverse
        </div>
        <div class="flex-ibox flex-ibox--row-bsb flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bsb flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-bsb flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-bsb flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-tsa flex-ibox--reverse
        </div>
        <br><br>
        <div class="flex-ibox flex-ibox--row-tsa flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-tsa flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-csa flex-ibox--reverse
        </div>
        <br><br>
        <div class="flex-ibox flex-ibox--row-csa flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csa flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-csa flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
        <div class="flex-ibox flex-ibox--row-csa flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-ibox--row-bsa flex-ibox--reverse
        </div>
        <br><br>
        <div class="flex-ibox flex-ibox--row-bsa flex-ibox--reverse" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>

        <div class="flex-ibox flex-ibox--row-bsa flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
        <br><br><br>
        <p>添加 flex-ibox--vertical-top 或者 flex-ibox--vertical-bottom之后</p>
        <div class="flex-ibox flex-ibox--row-bsa  flex-ibox--reverse flex-ibox--vertical-top" >
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>

        <div class="flex-ibox flex-ibox--row-bsa flex-ibox--reverse" style="width:182px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
            <div class="flex-box__item">3</div>
            <div class="flex-box__item">4</div>
            <div class="flex-box__item">5</div>
        </div>
    </div>
</div>




<!--

<div style="margin-top:100px;">
    <hr/>
    <h2>column</h2>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-tl
        </div>
        <div class="flex-box flex-box--column-tl" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-tc
        </div>
        <div class="flex-box flex-box--column-tc" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-tr
        </div>
        <div class="flex-box flex-box--column-tr" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-cl
        </div>
        <div class="flex-box flex-box--column-cl" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-cc
        </div>
        <div class="flex-box flex-box--column-cc" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-cr
        </div>
        <div class="flex-box flex-box--column-cr" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>

    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-bl
        </div>
        <div class="flex-box flex-box--column-cl" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-bc
        </div>
        <div class="flex-box flex-box--column-cc" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
    <div class="demo">
        <div style="color:#f00;margin-top:50px;padding:5px;background:#dbdbdb;" >
            flex-box--column-br
        </div>
        <div class="flex-box flex-box--column-cr" style="height:100px;">
            <div class="flex-box__item">1</div>
            <div class="flex-box__item">2</div>
        </div>
    </div>
</div>

-->

</body>
</html>